import React, {useEffect, useState, useMemo, memo} from 'react';
import IChartsProps from '../ICharts'
import {setConfigs, setData, setDataPercent} from '../ChartsConfig'
import createG2 from '../G2Create';
import {message} from 'antd';

require('../index.less')

const Bar: React.FC<IChartsProps> = memo((props) => {
  const {onSelect, showDataDown, width, height, drillsIcon} = props
  const [records, setRecords] = useState<Array<any>>([]);


  const getValue = (event: any) => {
    let values = []
    values.push(event.data.data)
    setRecords(values)
    return values
  }
  /**
   * 记录点击后的记录值
   * @param event
   * @param chart
   * @param canvas
   */
  const chartClick = (event: any) => {
    let values = getValue(event)
    onSelect && onSelect(values)
  }

  /**
   * 图表渲染
   * @param chart
   * @param configs
   */
  const g2Create = (chart: any, configs: any) => {

    const {barChart, stack} = props.configs.chartStyles.bar
    let data: Array<any> = setData(props)
    const {filterConfigs} = props
    let groups: Array<string> = filterConfigs.groups.filter((v: string) => v)
    //维度字段
    const name = groups[groups.length - 1]
    chart.on('click', (ev: any) => {
      ev.data && chartClick(ev)
    });
    const {onEvent, tooltip, position, axis} = configs;
    let color = 'type'
    const types = Array.from(new Set(data.map(v => v.type)))
    const names = Array.from(new Set(data.map(v => v[name])))
    if (types.length === 1) {
      // color = name
      if (names && JSON.stringify(names).length > 70) {
        chart.legend(false)
      }
    } else (types.length > 1)
    {
      if (types && JSON.stringify(types).length > 70) {
        chart.legend(false)
      }

    }
    chart.tooltip(tooltip);
    onEvent(chart)
    // 切换条线图
    if (barChart) {
      //单列
      if (types.length === 1) {
        color = '#8866FF'
      }
      chart.coordinate().transpose();
    } else {
      if (types.length === 1) {
        color = '#FFB74B'
      }
      axis.forEach((val: any) => {
        chart.axis(val.field, val.config);
      })
    }
    const interval = chart.interval();
    //开启层叠图
    if (stack.on) {
      //百分比层叠
      if (stack.percentage) {
        data = setDataPercent(props)
        interval.position(position.replace('value', 'percent')).color(color).adjust('stack');
      } else {
        interval.position(position).color(color).adjust('stack');
      }
    } else {
      if (color === 'type') {
        interval.position(position).color(color).adjust([{
          type: 'dodge',
          marginRatio: 0.05 // 设置分组间柱子的间距
        }]);
      } else {
        interval.position(position).color(color).adjust('stack');
        ;
      }
    }
    chart.data(data);
    chart.render();
  }


  let G2Create = createG2(g2Create);
  useEffect(() => {
    setRecords([])
    G2Create = createG2(g2Create);
  }, [props])
  /**
   * 下钻
   */
  const dataDown = () => {
    if (records.length === 0) {
      message.info('请选择', 2);
      return
    }
    showDataDown(records)
  }

  const configs = setConfigs(props)
  const G2Chart = useMemo(() => <G2Create
    width={width}
    height={height}
    configs={configs}
  />, [props])
  return (
    <div>
      {showDataDown ? <div className="drillBody">
        {drillsIcon(dataDown)}
      </div> : null}
      {G2Chart}

    </div>
  )
})
export default Bar;
